<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>y商品详情</title>
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="./font_4090654_muxi9r0zi3d/iconfont.css">
  <link rel="stylesheet" href="./css/商品详情.css">
</head>

<body>
  <!-- 点击轮播图显示，不点击隐藏 -->
  <div class="yincang"></div>


  <div class="header">

    <div class="title">
      <span class="iconfont icon-xiaoyufuhao"></span>
      <h3>商品详情页</h3>


    </div>
  </div>
  <!-- 轮播图 -->
  <div class="swiper">
    <div class="swiper-wrapper">
      <!-- <div class="swiper-slide"><img src="./img/a072ef0eef1648a5c4eae81fad1b7583.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/b106e9bd9e0c8c779e7d77a84e92ed93.png" alt=""></div>
      <div class="swiper-slide"><img src="./img/bfe7f91b8413f35f8a222450d630d0c0.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/f01c5fc360f55c6053beec34913bc699.png" alt=""></div> -->
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div> -->
    <div class="swiper-button-next">3/5</div>

  </div>


  <div class="lan">
    <div class="pic">
      <span><i>￥</i>0.01</span>
      <span><i>￥</i>6699.00</span>

      <span>已售1011件</span>


    </div>
    <div class="pic2">
      <p>三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23</p>
    </div>
  </div>
  <div class="guanggao">
    <span class="iconfont icon-duigou"><i>七天无理由退货</i></span>
    <span class="iconfont icon-duigou"><i>48小时发货</i></span>

  </div>
  <div class="shangpin">
    <span class="one">商品评价(五条)</span>

    <div class="chakan"><span>查看更多</span>
      <span class="iconfont icon-dayufuhao"></span>
    </div>

  </div>
  <div class="box">
    <!-- <div class="box1">
      <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
      <p>谷神不死</p>
      <span class="iconfont icon-xingxing "></span>
      <span class="iconfont icon-xingxing "></span>
      <span class="iconfont icon-xingxing "></span>
      <span class="iconfont icon-xingxing "></span>
      <span class="iconfont icon-xingxing "></span>
    </div>
    <div class="box2">
      <p>质量很不错 挺喜欢的</p>
      <p>2023-03-21 15:01:35</p>
    </div> -->
  </div>
  <div class="box">
    <!-- <div class="box1">
      <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
      <p>谷神不死</p>
      <span class="iconfont icon-xingxing "></span>
      <span class="iconfont icon-xingxing "></span>
      <span class="iconfont icon-xingxing "></span>
      <span class="iconfont icon-xingxing "></span>
      <span class="iconfont icon-xingxing "></span>
    </div>
    <div class="box2">
      <p>质量很不错 挺喜欢的</p>
      <p>2023-03-21 15:01:35</p>
    </div> -->
  </div>
  <div class="miaoshu">
    <h3>商品描述</h3>
  </div>
  <div class="tupian">
    <img src="./img/153802234173870097567545.jpg" alt="">
  </div>


  <div class="footer">
    <div class="left">
      <ul>
        <li>
          <span class="iconfont icon-shouye">

          </span>
          <p>首页</p>
        </li>
        <li>
          <span class="iconfont icon-gouwuche1">

          </span>
          <p>购物车</p>
        </li>
      </ul>
    </div>
    <div class="right">
      <div class="hezi">
        <a href="#">加入购物车</a>
      </div>
      <div class="hezi2">
        <a href="#">立即购买</a>
      </div>

    </div>
  </div>


  <script src="./swiper/swiper-bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>
    // 给左上角箭头注册点击事件，跳转至首页
    document.querySelector('.title span').addEventListener('click', function () {
      location.href = '../智慧商城（首页）/智慧商城.html'
    })
    //获取服务器数据
    const goodsId = JSON.parse(localStorage.getItem('shouji'))
    console.log(goodsId);
    async function xiangqing() {
      const res = await axios({ url: `http://cba.itlike.com/public/index.php?s=/api/goods/detail&goodsId=${goodsId}` })
      // console.log(res.data)
      const detail = res.data.data.detail
      // console.log(detail.goods_images)
      document.querySelector('.pic2 p').innerHTML = detail.goods_name

      document.querySelectorAll('.pic span')[0].innerHTML = `<i>￥</i>${detail.goods_price_max}`
      if (+detail.line_price_max < +detail.goods_price_max) {
        document.querySelectorAll('.pic span')[1].innerHTML = ''
      } else {
        document.querySelectorAll('.pic span')[1].innerHTML = `<i>￥</i>${detail.line_price_max}`
      }




      document.querySelectorAll('.pic span')[2].innerHTML = `已售${detail.goods_sales}件`


      document.querySelector('.swiper-wrapper').innerHTML = detail.goods_images.map(function (item) {
        return `<div class="swiper-slide"><img src=${item.external_url} alt=""></div>`
      }).join('')

      // 轮播图
      let mySwiper = new Swiper('.swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // },


        // 自动切换

        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
        effect: 'slide',
        on: {
          slideChangeTransitionEnd: function a() {
            // console.log(this.realIndex);
            document.querySelector('.swiper-button-next').innerHTML = `${++this.realIndex}/${detail.goods_images.length}`
          }
        }

      })
      // console.log(res.data.data.detail.content)
      // 商品描述
      document.querySelector('.tupian').innerHTML = res.data.data.detail.content
      // 获取商品评价总数
      const zongshu = await axios({
        url: `http://cba.itlike.com/public/index.php?s=/api/comment/total&goodsId=${goodsId}`
      })
      console.log(zongshu)
      // console.log(zongshu.data.data.total)
      document.querySelector('.one').innerHTML = `商品评价(${zongshu.data.data.total.all}条)`
      // 获取商品评论
      const pinglun = await axios({ url: `http://cba.itlike.com/public/index.php?s=/api/comment/listRows&goodsId=${goodsId}&limit=${zongshu.data.data.total.all}` })
      console.log(pinglun)
      // console.log(pinglun.data.data.list)

      if (pinglun.data.data.list.length == 0) {
        document.querySelector('.box').innerHTML = ''
        document.querySelector('.box').style.height = '0'
        document.querySelector('.shangpin').innerHTML = ''
        document.querySelector('.shangpin').style.height = '0'

      } if (!(pinglun.data.data.list.length == 0)) {
        // 点击 查看更多 进入商品评价页
        document.querySelector('.chakan').addEventListener('click', function () {
          location.href = '../商品评论页/商品评论页.html'
        })
        if (pinglun.data.data.list.length > 1) {
          if (pinglun.data.data.list[0].score == 10) {
            document.querySelectorAll('.box')[0].innerHTML = `
      <div class="box1">
        <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
        <p>${pinglun.data.data.list[0].user.nick_name}</p>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
      </div>
      <div class="box2">
        <p>${pinglun.data.data.list[0].content}</p>
        <p>${pinglun.data.data.list[0].create_time}</p>
      </div>
      `
          } else if (pinglun.data.data.list[0].score == 20) {
            document.querySelectorAll('.box')[0].innerHTML = `
      <div class="box1">
        <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
        <p>${pinglun.data.data.list[0].user.nick_name}</p>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
      </div>
      <div class="box2">
        <p>${pinglun.data.data.list[0].content}</p>
        <p>${pinglun.data.data.list[0].create_time}</p>
      </div>
      `
          } else {
            document.querySelectorAll('.box')[0].innerHTML = `
      <div class="box1">
        <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
        <p>${pinglun.data.data.list[0].user.nick_name}</p>
        <span class="iconfont icon-xingxing "></span>
      </div>
      <div class="box2">
        <p>${pinglun.data.data.list[0].content}</p>
        <p>${pinglun.data.data.list[0].create_time}</p>
      </div>
      `
          }


          if (pinglun.data.data.list[1].score == 10) {
            document.querySelectorAll('.box')[1].innerHTML = `
      <div class="box1">
        <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
        <p>${pinglun.data.data.list[1].user.nick_name}</p>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
      </div>
      <div class="box2">
        <p>${pinglun.data.data.list[1].content}</p>
        <p>${pinglun.data.data.list[1].create_time}</p>
      </div>
      `
          } else if (pinglun.data.data.list[1].score == 20) {
            document.querySelectorAll('.box')[1].innerHTML = `
      <div class="box1">
        <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
        <p>${pinglun.data.data.list[1].user.nick_name}</p>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
   
      </div>
      <div class="box2">
        <p>${pinglun.data.data.list[1].content}</p>
        <p>${pinglun.data.data.list[1].create_time}</p>
      </div>
      `
          } else {
            document.querySelectorAll('.box')[1].innerHTML = `
      <div class="box1">
        <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
        <p>${pinglun.data.data.list[1].user.nick_name}</p>
        <span class="iconfont icon-xingxing "></span>   
      </div>
      <div class="box2">
        <p>${pinglun.data.data.list[1].content}</p>
        <p>${pinglun.data.data.list[1].create_time}</p>
      </div>
      `
          }
          // 

        } else if (pinglun.data.data.list.length == 1) {
          if (pinglun.data.data.list[0].score == 10) {
            document.querySelectorAll('.box')[0].innerHTML = `
      <div class="box1">
        <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
        <p>${pinglun.data.data.list[0].user.nick_name}</p>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
      </div>
      <div class="box2">
        <p>${pinglun.data.data.list[0].content}</p>
        <p>${pinglun.data.data.list[0].create_time}</p>
      </div>
      `
          } else if (pinglun.data.data.list[0].score == 20) {
            document.querySelectorAll('.box')[0].innerHTML = `
      <div class="box1">
        <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
        <p>${pinglun.data.data.list[0].user.nick_name}</p>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
        <span class="iconfont icon-xingxing "></span>
      </div>
      <div class="box2">
        <p>${pinglun.data.data.list[0].content}</p>
        <p>${pinglun.data.data.list[0].create_time}</p>
      </div>
      `
          } else {
            document.querySelectorAll('.box')[0].innerHTML = `
      <div class="box1">
        <img src="./img/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
        <p>${pinglun.data.data.list[0].user.nick_name}</p>
        <span class="iconfont icon-xingxing "></span>
      </div>
      <div class="box2">
        <p>${pinglun.data.data.list[0].content}</p>
        <p>${pinglun.data.data.list[0].create_time}</p>
      </div>
      `
          }
        } else { document.querySelectorAll('.box')[0].innerHTML = '' }
      }

      // 点击首页,跳转到首页
      document.querySelectorAll('.left li')[0].addEventListener('click', function () {
        location.href = '../智慧商城（首页）/智慧商城.html'
      })
      // 点击购物车跳转到购物车页面
      document.querySelectorAll('.left li')[1].addEventListener('click', function () {
        location.href = '../智慧商城购物车/index.html'
      })



















    }
    xiangqing()





  </script>



</body>

</html>